<template>
	<view class="w-100">
		<view class="flex-1 bg-white py-2">
			<view class="flex-1 mx-3">
				<view class="py-1 font-s-4 font-w">提现方式</view>
				<view class="flex-1 row-ac-sb py-2" @click="tapWechat" v-if="distributDetail.is_wechat">
					<view class="row-ac">
						<view class="iconfont icon-weixinzhifu2"></view>
						<view class="ml-2">微信</view>
					</view>
					<view class="take-box row" :class="{ active: wechat_status ==true }">
						<view class="selected"></view>
					</view>
				</view>
				<view class="flex-1 row-ac-sb py-2" @click="tapAlipay" v-if="distributDetail.is_alipay">
					<view class="row-ac">
						<view class="iconfont icon-zhifubaozhifu"></view>
						<view class="ml-2">支付宝</view>
					</view>
					<view class="take-box row" :class="{ active: alipay_status ==true }">
						<view class="selected"></view>
					</view>
				</view>
				<view class="flex-1 row-ac-sb py-2" @click="tapBank" v-if="distributDetail.is_bank">
					<view class="row-ac">
						<view class="iconfont icon-name-card"></view>
						<view class="ml-2">银行卡</view>
					</view>
					<view class="take-box row" :class="{ active: bank_status ==true }">
						<view class="selected"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="flex-1 mt-3 bg-white py-2">
			<view class="flex-1 mx-3">
				<view class="font-s-3">可提现余额: {{ userCommission.added_commission }}元</view>
				<view class="py-2 mt-1 border-bottom flex-1 row-ac">
					<view class="font-s-8 font-w">￥</view>
					<input type="text" class="p-2 flex-1" placeholder="请输入提现金额" v-model="form.amount">
				</view>
				<view class="py-2 mt-1 flex-1 row-ac-sb">
					<view class="">
						<view class="font-s-4">提现费用</view>
						<view class="text-muted font-s-3">预计到账时间</view>
					</view>
					<view class="">
						<view class="font-s-4">{{ withdrawalFee }}元</view>
						<view class="text-muted font-s-3">当日到账</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mt-5 row">
			<view class="submit-box row" @click="submitForm">提交</view>
		</view>
	</view>
</template>

<script>
	import {
		userInfoUrl,
	} from '@/api/index.js';
	import {
		commissionstatsUrl,
		distributiondataCreateUrl,
		distributorssettingsDetailUrl
	} from '@/api/promotion';
	export default {
		data() {
			return {
				userInfo: '',
				userCommission: '',
				form: {
					types: 3,
					amount: '',
					withdrawal_method: 0,
					actual_amount: '',
				},
				distributDetail: '',
				wechat_status: true,
				alipay_status: false,
				bank_status: false,
			}
		},
		mounted() {
			this.token = uni.getStorageSync('token')
			if (this.token != '') {
				this.loginStatus = true
				this.getUserInfo()
			} else {
				this.loginStatus = false
			}
			this.getDistributorssettingsDetail()
		},
		computed: {
			withdrawalFee() {
				const amount = parseFloat(this.form.amount);
				if (isNaN(amount)) {
					return '0.00';
				} else {
					const fee = amount * (this.distributDetail.commission / 100); // 手续费为提现金额乘以动态手续费的百分比
					return fee.toFixed(2);
				}
			},
		},
		methods: {
			getUserInfo() {
				this.$R.get(userInfoUrl).then(res => {
					this.userInfo = res.data
					this.getCommissionstats(this.userInfo.id)
				})
			},
			getDistributorssettingsDetail() {
				this.$R.get(distributorssettingsDetailUrl + 1 + '/').then(res => {
					this.distributDetail = res.data
				})
			},
			getCommissionstats(userId) {
				this.$R.get(commissionstatsUrl + userId + '/').then(res => {
					this.userCommission = res.data
				})
			},
			tapWechat() {
				this.form.withdrawal_method = 0
				this.wechat_status = true
				this.alipay_status = false
				this.bank_status = false
			},
			tapAlipay() {
				this.form.withdrawal_method = 1
				this.wechat_status = false
				this.alipay_status = true
				this.bank_status = false
			},
			tapBank() {
				this.form.withdrawal_method = 2
				this.wechat_status = false
				this.alipay_status = false
				this.bank_status = true
			},
			calculateActualAmount() {
				const amount = parseFloat(this.form.amount);
				const fee = parseFloat(this.withdrawalFee);
				if (isNaN(amount) || isNaN(fee)) {
					return '0.00';
				} else {
					const actual = amount - fee;
					return actual.toFixed(2);
				}
			},
			submitForm() {
				this.form.actual_amount = this.calculateActualAmount();
				console.log(this.calculateActualAmount());
				this.$R.post(distributiondataCreateUrl, this.form).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '申请成功',
							icon: 'none'
						});
						uni.navigateBack({
							delta: 1
						});
					} else if (res.code == 400) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				});
			},

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.icon-weixinzhifu2 {
		font-size: 36rpx;
		color: #009500;
	}

	.icon-zhifubaozhifu {
		font-size: 36rpx;
		color: #0B91EA;
	}

	.icon-name-card {
		font-size: 36rpx;
		color: #EA660B;
	}

	.take-box {
		width: 33rpx;
		height: 33rpx;
		border-radius: 50%;
		border: 3rpx solid #D7D7D7;

		.selected {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			background-color: #fff;
		}
	}

	.active {
		border: 3rpx solid #EA660B !important;
	}

	.active .selected {
		background-color: #EA660B;
	}

	.submit-box {
		width: 368rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background-color: #EA660B;
		color: #fff;
	}
</style>